<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animate</title>
    <link rel="stylesheet" href="./css/animate.css" />
    <link rel="stylesheet" href="./css/hover.css" class="" />
    <link rel="stylesheet" href="./css/size.css" class="" />
    <!-- [[[[[Bootstrap CSS]]]]] -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div class="container-fluid" style="">
      <div class="row row-cols-2 row-cols-sm-12">
        <!-- scalex 悬浮效果 进出方向一致-->
        <div class="col-1">
          <div
            class="hover-scalex-tor-wrap"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div class="hover-scalex-tor" style="width: 100%"></div>
          </div>
          <p class="text-center" style="width: 100px">进出方向一致</p>
        </div>
        <div class="col-1">
          <div
            class="hover-scalex-tor-wrap"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-scalex-tor trans-origin-right"
              style="width: 100%"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">进出方向一致</p>
        </div>
        <!--scalex 悬浮效果 进出方向相反 -->
        <div class="col-1">
          <div
            class="hover-scalex-track-wrap"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-scalex-track bg-black h-100"
              style="width: 100%"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">进出方向相反</p>
        </div>
        <!-- 悬浮变大 呼吸 -->
        <div class="col-1">
          <div
            class="hover-zoomin-wrap d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-zoomin duration-0_5 bg-info"
              style="width: 20px; height: 20px"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮变大</p>
        </div>
        <!-- 悬浮变大 呼吸 -->
        <div class="col-1">
          <div
            class="hover-zoomin-wrap d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <img class="hover-zoomin w-100 h-100" src="./img/jin.jpg" alt="" />
          </div>
          <p class="text-center" style="width: 100px">呼吸变大</p>
        </div>
        <!-- 悬浮变小 呼吸 -->
        <div class="col-1">
          <div
            class="hover-scale-shrink-wrap d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <img
              class="hover-scale-shrink w-100 h-100"
              src="./img/jin.jpg"
              alt=""
            />
          </div>
          <p class="text-center" style="width: 100px">呼吸变小</p>
        </div>
        <!-- 悬浮向上移动 -->
        <div class="col-1">
          <div
            class="hover-translatey-up-wrap pt-5"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-translatey-up bg-black"
              style="width: 20px; height: 20px"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮向上移动</p>
        </div>
        <!-- 悬浮向右移动 -->
        <div class="col-1">
          <div
            class="hover-translatex-tor-wrap pt-5"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-translatex-tor bg-black"
              style="width: 20px; height: 20px"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮向右移动</p>
        </div>
        <!-- 悬浮显示内容 -->
        <div class="col-1">
          <div
            class="hover-opacity-show-wrap d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-opacity-show bg-black"
              style="width: 20px; height: 20px"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮显示内容</p>
        </div>
        <!-- 悬浮阴影消失 -->
        <div class="col-1">
          <div
            class="hover-mask-wrap position-relative"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <img
              class="w-100 h-100 position-absolute"
              src="./img/jin.jpg"
              alt=""
            />
            <div class="hover-mask w-100 h-100" style=""></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮阴影消失</p>
        </div>
        <!-- 悬浮水位线上升 -->
        <div class="col-1">
          <div
            class="hover-heighten-wrap"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div class="hover-heighten bg-info w-100" style=""></div>
          </div>
          <p class="text-center" style="width: 100px">水位线上升</p>
        </div>
        <!-- 鼠标悬浮左右摆动 -->
        <div class="col-1">
          <div
            class="hover-swing-wrap d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <div
              class="hover-swing bg-info"
              style="width: 20px; height: 20px"
            ></div>
          </div>
          <p class="text-center" style="width: 100px">悬浮左右摆动</p>
        </div>
      </div>

      <div class="row mt-5">
        <!-- 导航字体向上滚动 -->
        <div class="col-1">
          <div
            class="d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <ul
              class="hover-translate-top-wrap list-unstyled mb-0"
              style="height: 30px"
            >
              <li class="hover-translate-top">
                <a href="" class="hover-translate-top-item">平台产品</a>
              </li>
            </ul>
          </div>
          <p class="text-center" style="width: 100px">导航字体向上滚动</p>
        </div>
        <!-- 悬浮字体向右滚动 -->
        <div class="col-1">
          <div
            class="d-flex align-items-center justify-content-center"
            style="width: 100px; height: 100px; background: #ccc"
          >
            <ul
              class="hover-translate-right-wrap list-unstyled mb-0"
              style="height: 30px"
            >
              <li class="hover-translate-right overflow-hidden">
                <a href="" class="hover-translate-right-item">
                  <span>-</span>
                  <span>关于我们</span>
                </a>
              </li>
            </ul>
          </div>
          <p class="text-center" style="width: 100px">悬浮字体向右滚动</p>
        </div>
      </div>
      <div class="row mt-5">
        <!-- amimation 圆圈 -->
        <div class="col-1 position-relative pt-5">
          <div class="message">
            <span></span>
            <span></span>
          </div>
        </div>
        <!--  -->
      </div>

      <div class="w-25 text-truncate-2 bg-black">
        好奇、创新是我们不变的主题。以企业品牌建设为出发点，融合设计、策划、技术、运营的专业力量，为用户提供品牌官网建设、数字营销、技术开发服务。助力用户在互联网时代、数字化浪潮、AI趋势下聚焦品牌竞争力来获得成功。
        好奇、创新是我们不变的主题。以企业品牌建设为出发点，融合设计、策划、技术、运营的专业力量，为用户提供品牌官网建设、数字营销、技术开发服务。助力用户在互联网时代、数字化浪潮、AI趋势下聚焦品牌竞争力来获得成功。
      </div>
    </div>
  </body>
</html>
